<html>

<head>
    <title>分享的文章</title>
    <link rel="stylesheet" href="../css/editormd.css" />
    <link rel="stylesheet" href="../css/element.css" />
    <script src="../js/jquery.min.js"></script>
    <script src="../lib/marked.min.js"></script>
    <script src="../lib/prettify.min.js"></script>
    <script src="../editormd.js"></script>
    <!-- 先引入 Vue -->
    <script src="../js/vue.js"></script>
    <script src="../js/a.js"></script>
	  <script src="../js/qrcode.js"></script>
    <script src="../lib/c.js"></script>
    <!-- 引入组件库 -->
    <script src="../js/element.ui.js"></script>
    <script src="../js/crypto-js.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leancloud-storage@3.14.1/dist/av-live-query-min.js"></script>
    <script type="text/javascript" src="../pwd/js/DigitalRain.js"></script>
    
    <!--单击显示文字-->
    <script type="text/javascript" src="../pwd/js/click_show_text.js"></script>

</head>

<body>
    <!-- 数字雨 -->
    <canvas id="canvas" width="1440" height="900"></canvas>
	
    <div id="app">
        <div id="root_group">
			
            <div id="mian_view">
			     <div class="flex">
					  <h1>{{md.name}}</h1>
					 	<div id="qrcode"></div>
				 </div>
			
				<div class="flex titleCss">
					<span class="el-icon-s-custom" style="line-height: 50px;">{{md.UserId}}</span>
					<span class="el-icon-timer" style="line-height: 50px;">{{md.updatedAt}}</span>
					<a class="el-icon-connection" style="line-height: 50px;" href="https://zyqing.ml/">工具由会飞的猪提供</a>
				</div>
                <div id="overMd" style="padding:10px">
			    <div id="mdOverBg"></div>
            </div>

        </div>
    </div>

    </div>
    <script>
		
        var vue = new Vue({
            el: '#app',
            methods: {
                getQuery() {
					setTimeout(function(){
						var qrcode = new QRCode(document.getElementById("qrcode"), {
							width : 100,
							height : 100
						}); 
						qrcode.makeCode(window.location.href);
					},300)
					
                    let query = getQueryString('data')
                   if(query!=null){
                    getNetMd(getDAes(query))
                   }	
                   
                },
               
            },
            data: function () {               
               return {
                    md:{
						UserId:"未知",
						updatedAt:"未知时间"
					},
                    dialogVisible: true
                }
            },
            created: function () {
                if(!(IsPC())){
                    $('#mian_view').css({
                       width:'100%' 
                    })
                }
                init()
                this.getQuery()
               

            }
        })
        function init() {
            AV.init({
                appId: $.Encryption.Cloud.APP_ID,
                appKey: $.Encryption.Cloud.APP_KEY
            });
        }
        function getNetMd(value) {
            var query = new AV.Query($.Encryption.CloudTable.MdList)
            query.equalTo('objectId', value);
            query.find().then(function (data) {
                var json = JSON.parse(JSON.stringify(data));
              
                if (json != null && json.length > 0) {
					    vue._data.md=json[0]
						overWatchMd('overMd', json[0].data)
                    
                }else{
                    err();
                }

            }, function (arg) {
                err();
            });
        }
         function overWatchMd (id, markdown) {
          
			editormd.markdownToHTML(id, {
				htmlDecode: "style,script,iframe",
				markdown: markdown,
				emoji: true,
				taskList: true,
			});
			addWaterMarker('文章由'+vue._data.md.UserId+'编写')
        }
        function err() {
            vue.$message.error("页面已失效");
        }
		function addWaterMarker(str){
		            var can = document.createElement('canvas');
		            var body = document.getElementById('mdOverBg');
		            body.appendChild(can);
		            can.width=350; //画布的宽
		            can.height=300;//画布的高度
		            can.style.display='none';
		            var cans = can.getContext('2d');
		            cans.rotate(-20*Math.PI/180); //画布里面文字的旋转角度
		            cans.font = "20px Microsoft JhengHei"; //画布里面文字的字体
		            cans.fillStyle = "rgba(17, 17, 17, 0.50)";//画布里面文字的颜色
		            cans.textAlign = 'left'; //画布里面文字的水平位置
		            cans.textBaseline = 'Middle'; //画布里面文字的垂直位置
		            cans.fillText(str,can.width/3,can.height/2); //画布里面文字的间距比例
		            body.style.backgroundImage="url("+can.toDataURL("image/png")+")"; //把画布插入到body中
		        }
			

    </script>
</body>
<style>
    canvas {
        position: fixed;
        right: 0px;
        bottom: 0px;
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
		z-index: -1;
    }
    #overMd{
		position: relative;
	}
	#mdOverBg{
		position: absolute;
		height: 100%;
		width: 95%;
		/* display: none; */
		top: 0;
		z-index: 9;
		
		
	}
	a{
		position: relative;
		pointer-events: auto;
		z-index: 99;
	}
    #root_group {
      
        display: flex;
        align-items: center;
        justify-content: center
    }


    #mian_view {
        width: 60%;
        padding: 50px;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 10px;
        min-width: 500px;
		display: flex;
		flex-direction: column;
		align-items: flex-end;
    }

    .title {
        text-align: center;
        margin-bottom: 50px;
    }
	.flex{
		display: flex;
		
		width: 100%;
		flex-direction: row;
		justify-content: space-between;
	}
	.titleCss{
		line-height: 50px;
		height: 50px;
	}
	.editormd-html-preview{
		background-color:rgba(255,255,255,0);}
	

</style>

</html>